<template>
  <div class="area-risk-right">
    <div class="title"></div>
    <div class="sort-title">
      <p>排名</p>
      <p>城市</p>
      <p>安全指数（分）</p>
    </div>
    <div class="main">
      <HorizontalColumnChart
          :echartsData="echartsData"
          :graphic-color="['rgba(43, 97, 223, 1)', 'rgba(39, 150, 253, 1)']"
      />
    </div>

    <div class="tab-box">
      <ComRadioTabA :tab="currentTab" :tab-list="tabList" @change="changeTime" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import HorizontalColumnChart from '@/components/echarts/horizontalColumnChart.vue';
import ComRadioTabA from '@/components/tabComp/ComRadioTabA.vue';

const currentTab = ref('1');

const tabList = [
  { name: '1', label: '倒序' },
  { name: '2', label: '顺序' },
];

const echartsData = [
  {
    name: '瑶海区',
    value: 98,
  },
  {
    name: '蜀山区',
    value: 96,
  },
  {
    name: '庐阳区',
    value: 92,
  },
  {
    name: '瑶海区',
    value: 88,
  },
  {
    name: '巢湖市',
    value: 82,
  },
  {
    name: '长丰县',
    value: 80,
  },
  {
    name: '肥西县',
    value: 78,
  },
  {
    name: '庐江县',
    value: 75,
  },
];

function changeTime(val: string) {
  currentTab.value = val;
}


defineComponent({ name: 'AreaRiskRight' });
</script>

<style scoped lang="scss">
.area-risk-right {
  @apply w-full h-full;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }


  .sort-title {
    @apply w-full h-[36px] leading-[36px] flex pl-[20px];
    background: linear-gradient(0deg, #022e5b 0%, #0b63ae 100%);
    font-family: Alibaba PuHuiTi;

    p {
      @apply mr-[24px];
    }
  }

  .main {
    @apply w-full h-[330px] mt-[10px];
  }

  .tab-box {
    @apply absolute right-0 top-[10px];
  }
}
</style>
